<template>
    <div class="material-container">
        <!-- 查询表单 -->
        <el-form :inline="true">
            <el-form-item>
                <el-autocomplete
                  v-model="searchObj.fmid"
                  :fetch-suggestions="querySearch"
                  :trigger-on-focus="false"
                  class="inline-input"
                  placeholder="物资编号"
                  value-key="fmid" />
              </el-form-item>
            <el-form-item>
              <el-autocomplete
                v-model="searchObj.fmname"
                :fetch-suggestions="querySearch"
                :trigger-on-focus="false"
                class="inline-input"
                placeholder="物资名称"
                value-key="fmname" />
            </el-form-item>
            <el-form-item>
                <el-select v-model="searchObj.fmkind" clearable placeholder="物资种类">
                    <el-option
                    v-for="item in kinds"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-autocomplete
                  v-model="searchObj.fmbrand"
                  :fetch-suggestions="querySearch"
                  :trigger-on-focus="false"
                  class="inline-input"
                  placeholder="品牌"
                  value-key="fmbrand" />
            </el-form-item>
            <el-form-item>
                <el-autocomplete
                  v-model="searchObj.fmtype"
                  :fetch-suggestions="querySearch"
                  :trigger-on-focus="false"
                  class="inline-input"
                  placeholder="型号"
                  value-key="fmtype" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="fetchData()">查询</el-button>
              <el-button type="default" @click="resetData()">清空</el-button>
            </el-form-item>
          </el-form>
        <el-button type="primary" @click.native="vueCreate">创建物资</el-button>
        <el-button type="primary" @click.native="vueCreate">导入Excel</el-button>
        <el-button type="primary" @click.native="vueCreate">导出Excel</el-button>
        <materialinfo :dialogFormVisible="dialogFormVisible" :editMaterialInfo="editMaterialInfo" :updateOrCreate="updateOrCreate"  />


        <!-- 表格部分代码 -->
        <el-table
            :data="materialList"
            style="width: 100%;">

            <el-table-column 
                prop="fmid"
                label="物资编号"
                width="100"
                sortable
                />
            <el-table-column 
                prop="fmname"
                label="物资名称"
                width="100"
                sortable
                />
            <el-table-column label="物资种类" width="100" prop="fmkind" sortable>
                <template slot-scope="scope">
                    <el-tag type="warning" effect="dark" v-if="scope.row.fmkind==1">设备</el-tag>
                    <el-tag type="danger" effect="dark" v-else-if="scope.row.fmkind==2">耗材</el-tag>
                    <el-tag type="danger" effect="dark" v-else>未知</el-tag>
                </template>
            </el-table-column>
            <el-table-column 
                prop="fmbrand"
                label="品牌"
                width="100"
                sortable
                />
            <el-table-column 
                prop="fmtype"
                label="型号"
                width="100"
                sortable
                />
            <el-table-column 
                prop="fmspec"
                label="主要参数"
                width="150"
                sortable
                />
            <el-table-column 
                prop="fmunit"
                label="计量单位"
                width="100"
                sortable
                />
            <el-table-column 
                prop="fmdesc"
                label="详细描述"
                width="200"
                sortable
                />
            <el-table-column 
                prop="fmmemo"
                label="备注"
                width="150"
                sortable
                />
            <el-table-column width="150" label="操作" sortable>
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="vueDelete(scope.row.fmid)">删除</el-button>
                    <el-button type="primary" size="small"  @click="vueEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>     
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="200">
      </el-pagination>
    </div>
</template>

<script>
import { deleteMaterial,getMaterialList } from '@/api/material'
import  materialinfo  from '@/views/warehouse/material/components/MaterialInfo'

/*
若父组件要引入单子子组件文件时，那么不能加 '{}' 框号
*/
export default {
    components: {
        materialinfo
    },
    data () {
        return {
            kinds: [{id: 1, name: '设备'},{id: 2, name: '耗材'}],
            materialList: {},
            searchObj: {},
            editMaterialInfo: {},
            dialogFormVisible: false,
            updateOrCreate: false,


        }
    },
    created () {
        this.fetchData()
    },
    methods: {
        vueCreate() {
            this.updateOrCreate = false
            this.dialogFormVisible = true
        },
        vueEdit(row) {
            this.updateOrCreate = true
            this.dialogFormVisible = true
            this.editMaterialInfo = row
        },
        vueReset() {
            this.dialogFormVisible = false
            this.updateOrCreate = false
            this.editMaterialInfo = {}
        },
        vueDelete(fmid){
            this.$confirm('此操作将永久删除，受否继续？','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMaterial(fmid).then(response => {
                    this.fetchData()
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })

        },
        fetchData(){
            getMaterialList(this.searchObj).then(response => {
                this.materialList = response.data.materialList
            })
        },
        resetData(){
            this.searchObj = {}
        }
    }
}
</script>

<style lang="scss" scoped>
    .material-container {
        margin: 10px 50px 0;
        overflow: hidden;
    }
</style>